<m-card>
  <ng-container card-head>
    <div class="d-flex align-items-center">
      <span class="g-card-title">添加人员</span>
    </div>
  </ng-container>
  <form class="g-my-form container" [formGroup]="personnelForm" (submit)="submit()">
    <div class="g-top-button-group">
      <button type="button" class="btn btn-secondary mr-3" (click)="back()">返回</button>
      <button type="submit" class="btn btn-primary">保存</button>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-9 col-xl-8">
        <div class="form-group required col-10">
          <label for="user-type">终端权限</label>
          <select id="user-type" type="text" class="form-control" formControlName="utype">
            <option value="" hidden>选择权限</option>
            <option value="0">成员</option>
            <option value="1">管理员</option>
          </select>
        </div>
        <div class="form-group required col-10">
          <label for="username">人员姓名</label>
          <input
            id="full_name"
            type="text"
            class="form-control"
            autocomplete="new-name"
            formControlName="full_name"
            maxlength="8"
          />
          <div
            class="invalid-feedback"
            *ngIf="this.personnelForm.get('full_name').errors as errors"
          >
            <span *ngIf="errors.nocharacters">
              姓名不能包含特殊符号
            </span>
          </div>
        </div>
        <div class="form-group col-10">
          <label for="job">工号</label>
          <input
            id="job"
            name="job_number"
            type="text"
            class="form-control"
            formControlName="job_number"
            maxlength="10"
          />
        </div>
        <div class="form-group required col-10">
          <label id="ldap_username">LDAP账号</label>
          <input
            id="ldap_username"
            type="text"
            class="form-control"
            autocomplete="new-username"
            formControlName="ldap_username"
            maxlength="16"
          />
          <div
            class="invalid-feedback"
            *ngIf="this.personnelForm.get('ldap_username').errors as errors"
          >
            <span *ngIf="errors.pattern">
              用户名必须由 a~z,A~Z,0~9,-,_组成,并以字符开头
            </span>
          </div>
        </div>
        <div class="form-group justify-content-between">
          <div class="form-group mb-0 required col-10">
            <label for="ldap_password">LDAP密码</label>
            <input
              id="ldap_password"
              [type]="this.personnelForm.get('random_password_switch').value === true ? 'text' : 'password'"
              class="form-control"
              autocomplete="new-password"
              formControlName="ldap_password"
              maxlength="32"
            />
            <div
              class="invalid-feedback"
              *ngIf="this.personnelForm.get('ldap_password').errors as errors"
            >
              <span *ngIf="errors.minlength">
                密码位数不少于8位 
              </span>
            </div>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" formControlName="random_password_switch" (change)="switchGenPsw()" value="false">
            <label class="form-check-label" for="inlineCheckbox1">随机密码</label>
          </div>
        </div>
        <div class="form-group required col-10">
          <label for="password_verify">密码确认</label>
          <input
            id="password_verify"
            [type]="this.personnelForm.get('random_password_switch').value === true ? 'text' : 'password'"
            class="form-control"
            autocomplete="new-password"
            formControlName="ldap_password_confirm"
            maxlength="32"
          />
          <div
            class="invalid-feedback"
            *ngIf="this.personnelForm.get('ldap_password_confirm').errors as errors"
          >
            <span *ngIf="errors.confirm">
              两次密码输入不一致
            </span>
          </div>
  
        </div>
        <div class="form-group required col-10">
          <label for="phone">手机号</label>
          <input
            id="phone"
            type="text"
            class="form-control"
            autocomplete="new-phone"
            formControlName="phone"
          />
          <div
            class="invalid-feedback"
            *ngIf="this.personnelForm.get('phone').errors as errors"
          >
            <span *ngIf="errors.pattern">
              手机号格式不正确
            </span>
          </div>
        </div>

        <div class="row" *ngIf="false">
          <div class="form-group col ">
            <label for="department_id">部门</label>
            <select id="department_id" class="form-control" formControlName="department_id">
              <option value="" hidden>选择部门</option>
              <option
                *ngFor="let department of formData.department$ | async"
                [value]="department.id"
                [title]="department.des"
              >
                {{ department.name }}
              </option>
            </select>
          </div>
          <div class="form-group col ">
            <select id="position_id" class="form-control" formControlName="position_id">
              <option value="" hidden>选择职位</option>
              <option *ngFor="let position of formData.position$ | async" [value]="position.id">
                {{ position.name }}
              </option>
            </select>
            <label for="position_id">职位</label>
          </div>
        </div>
        <div class="row" *ngIf="false">
          <div class="form-group col-5">
            <select id="sex" type="text" class="form-control" formControlName="sex">
              <option value="" hidden>选择性别</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
            <label for="sex">性别</label>
          </div>
          <div class="form-group  col-7">
            <label for="birth_year">出生年月</label>
            <select id="birth_year" class="form-control" formControlName="birth_year">
              <option value="" hidden>选择年份</option>
              <option *ngFor="let y of formData.yearList" [value]="y">{{ y }}年</option>
            </select>
            &nbsp;
            <select id="birth_month" class="form-control" formControlName="birth_month">
              <option value="" hidden>选择月份</option>
              <option *ngFor="let m of formData.monthList; let index = index" [value]="index">
                {{ m }}月
              </option>
            </select>
          </div>
        </div>
        <div class="form-group" *ngIf="false">
          <label for="email">邮箱地址</label>
          <input
            id="email"
            type="text"
            class="form-control"
            autocomplete="new-email"
            formControlName="email"
          />
        </div>
        <div class="form-group col-10">
          <label for="remark">人员备注</label>
          <input
            id="remark"
            type="text"
            class="form-control"
            formControlName="remark"
            maxlength="100"
          />
        </div>
      </div>
      <div class="col-12 col-lg-3 col-xl-4 d-flex justify-content-end">
        <m-image-preview
          class="photo-size"
          [control]="fileInput"
          valueType="file"
          formControlName="photo"
        >
          <input type="file" name="photo" accept="image/*" class="form-control" hidden #fileInput />
        </m-image-preview>
      </div>
    </div>
  </form>
</m-card>
